<template>
	<div>
		<div style='margin-top: 200rpx;'>{{posterList}}</div>
		<!-- <image :src="posterList[0]" mode=""></image> -->
		<!-- <view class='healthPromotion' :videoLists="videoLists" :change:videoLists="renderScript.createPoster"></view> -->
		<Swiper :list='list4' mode='number'></Swiper>

	</div>
</template>


<script>
	import Swiper from '../../componentes/z-swiper/index.vue'
	
    export default {
		components:{
			Swiper
		},
		
        data() {
            return {
				videoLists:[], // 获取到的视频列表数组
				posterList: [] ,// 视频封面图数组
                list4: [{ 
					type:'video',
                    src: 'https://cdn.uviewui.com/uview/resources/video.mp4',
                    title: '昨夜星辰昨夜风，画楼西畔桂堂东',
                    poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
                },{
					type:'image',
                    src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    title: '身无彩凤双飞翼，心有灵犀一点通'
                },{
					type:'image',
                    src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
                }],
            }
        },
		onLoad(){
			let _this = this
			setTimeout(function() {
				_this.videoLists.push('https://cdn.uviewui.com/uview/resources/video.mp4' )
			}, 3000);
		},
		methods: {
			reciveMessage(val) {
				this.posterList = val
			}
		},
    }
</script>
<!-- <script module="renderScript" lang="renderjs">
	export default {
		methods: {
			createPoster(val) {
				console.log(val,'val')
				var videoCanList = [],curDateList = []
				val.forEach((item,index) => {
					var promise = new Promise((reslove, reject) => {
						// 在缓存中创建video标签
						var video = document.createElement("VIDEO")
						// 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图
						video.currentTime = 5
						// video.setAttribute('crossOrigin', 'anonymous');
						// video.setAttribute('autoplay', true)
						video.autoplay=true;
						video.crossOrigin='anonymous';
						// 再添加一个静音的属性，否则自动播放会有声音
						video.setAttribute('muted', 'muted')
						// 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为播放源
						video.innerHTML = '<source src=' + item + ' type="audio/mp4">'
						// 再创建canvas画布标签
						var canvas = document.createElement('canvas');
						var ctx = canvas.getContext('2d');
						// video注册canplay自动播放事件
						video.addEventListener('canplay', function() {
							// 创建画布的宽高属性节点，就是图片的大小，单位PX
							var anw = document.createAttribute("width");
							anw.nodeValue = 500;
							var anh = document.createAttribute("height");
							anh.nodeValue = 300;
							canvas.setAttributeNode(anw);
							canvas.setAttributeNode(anh);
							// 画布渲染
							ctx.drawImage(video, 0, 0, 500, 300);
							// 生成图片
							var base64 = canvas.toDataURL('image/png') // 这就是封面图片的base64编码
							// 视频结束播放的事件
							video.pause()
							curDateList.unshift({ // 这里是我自己的数据处理模块
								type: 'video',
								videoUrl: item.url,
								img: base64
							})
							reslove(base64)  // promise函数成功的回调
						}, false)
					})
					videoCanList.push(promise)
				})
				Promise.all(videoCanList).then(res => {
					console.log(res,'res')
					this.$ownerInstance.callMethod('reciveMessage', res)
				})
			},
		}
	}
</script> -->


<style lang="less">

</style>
